<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
    <meta charset="UTF-8">
    <title>添加文章</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{../lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{../css/okadmin.css}">
    <link rel="stylesheet" th:href="@{../css/popwin.css}">
    <link rel="stylesheet" th:href="@{../font/iconfont.css}">
    <style type="text/css">
        .line_02{
            height: 1px;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        .line_02 span{
            position: relative;
            top: -8px;
            background: #fff;
            padding: 0 20px;
        }
    </style>
</head>
<body>
<div class="ok-body">
    <div class="ok-body-breadcrumb">
        <span class="layui-breadcrumb">
            <a><cite style="font-weight: bold;">文章编辑</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" href="javascript:void(0);" onclick="hideBaseInfo()" title="隐藏">
            <i>隐藏基本信息</i>
        </a>
    </div>
    <form class="layui-form layui-form-pane ok-form">
        <div id="baseInfoBox">
            <table width="100%">
                <tr>
                    <td width="30%">
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" placeholder="标题" autocomplete="off" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                    </td>
                    <td rowspan="4" colspan="2">
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="margin-left: 0px;text-align: center;">
                                <img th:src="@{../imgs/upload.png}" title="题图" id="handSignImage" style="height:100px;right:10px; cursor:pointer;border:#E5E5E5 1px solid;border-radius:5px;" />
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="layui-form-item">
                            <label class="layui-form-label">副标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="subTitle" placeholder="副标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="layui-form-item">
                            <label class="layui-form-label">作者</label>
                            <div class="layui-input-block">
                                <input type="text" name="author" placeholder="作者" autocomplete="off" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="layui-form-item">
                            <label class="layui-form-label">分类</label>
                            <div class="layui-input-block">
                                <select name="type">
                                    <option value=""></option>
                                    <option th:each="op:${articleTypes}" th:value="${op.code}" th:text="${op.name}"></option>
                                </select>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="40%">
                        <div class="layui-form-item">
                            <label class="layui-form-label">优先级</label>
                            <div class="layui-input-block">
                                <input type="number" name="priority" placeholder="优先级" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </td>
                    <td width="30%" style="padding-left: 20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否轮播图</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="carousel" lay-skin="switch" lay-text="是|否" value="1">
                            </div>
                        </div>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">梗概</label>
                <div class="layui-input-block">
                    <textarea name="outline" placeholder="文章梗概" class="layui-textarea" lay-verify="required"></textarea>
                </div>
            </div>
        </div>
        <div class="line_02" style="margin-top: 20px;"><span>文章正文</span></div>
        <input type="hidden" name="content" id="articleContent"/>
        <iframe src="editor" style="z-index: 200;margin-top: 10px;" frameborder="0" scrolling="no" id="editorIframe" height="1100" width="100%"></iframe>
        <div class="popwin-footer" style="position: unset;">
            <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
            <button type="button" onclick="goBack()" class="layui-btn layui-btn-primary">返回</button>
        </div>
    </form>
</div>
<!--js逻辑-->
<script th:src="@{../lib/layui/layui.all.js}"></script>
<script>
    layui.use(['element', 'form', 'jquery', 'laydate'], function () {
        var form = layui.form;
        var $ = layui.jquery;

        var attachment = null;
        form.on('submit(add)', function (data) {
            var article = data.field;
            var text = $("#editorIframe")[0].contentWindow.getContent();
            if(!text){

                return false;
            }
            article.content = text;
            if(attachment){
                delete attachment.createUser;
                delete attachment.createTime;
                delete attachment.updateUser;
                delete attachment.updateTime;
                for(var key in attachment){
                    article["headImage." + key] = attachment[key];
                }
            }

            $.ajax({
                url: "add",
                method: "post",
                data: article,
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        goBack();
                    } else {
                        layer.msg(result.msg == null ? "添加失败" : result.msg, {icon: 6, time: 1000, anim: 4});
                    }
                }, error: function () {
                    layer.msg("添加失败, 稍后重试.", {icon: 6, time: 1000, anim: 4});
                }
            });
            return false;
        });

        layui.upload.render({
            elem: '#handSignImage'
            ,url: '../attachment/uploadImgWithoutInsert'
            ,auto: true //选择文件后自动上传
            ,accept: 'image/*'
            ,field: 'file'
            ,size:20480 //KB
            ,multiple: false
            ,done: function(res, index, upload){ //上传后的回调
                attachment = res.obj;
                $("#handSignImage").prop("src",  res.obj.location);
            }
        })
    })

    function hideBaseInfo(){
        layui.jquery("#baseInfoBox").slideToggle();
    }
    
    function goBack() {
        history.back();
    }
</script>
</body>
</html>
